<div class="page-title">Search</div>

<div class="flex flex-col md:flex-row justify-between gap-x-2">
  <mat-form-field class="w-full md:w-1/3">
    <input
      (keydown.escape)="search = ''; resetSearch()"
      (keyup)="applySearch($event.target)"
      [(ngModel)]="search"
      #searchInput
      autocomplete="off"
      class="w-full"
      matInput
      placeholder="Search for tracks"
      type="text"
      data-cy="search-term"
    />
    <button
      (click)="search = ''; resetSearch()"
      *ngIf="search"
      matSuffix
      mat-icon-button
    >
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>

  <div
    *ngIf="advSearchResponse$ | async as advSearchResponse"
    class="flex flex-col md:flex-row justify-between flex-grow gap-3"
  >
    <div class="flex-grow"></div>
    <!--Clear queue-->
    <div class="my-5 md:my-1">
      <button mat-raised-button (click)="onClearQueue()">
        <mat-icon>delete</mat-icon>
        <span> Clear queue </span>
      </button>
    </div>

    <!--Add all-->
    <div class="my-5 md:my-1">
      <button mat-raised-button (click)="onAddAll()">
        <mat-icon> add</mat-icon>
        <span> Add all </span>
      </button>
    </div>
  </div>

  <div class="my-5 md:my-1">
    <!--Advanced Search Link-->
    <button mat-raised-button [routerLink]="['/adv-search']">
      <span> Advanced Search</span>
    </button>
  </div>
</div>

<div *ngIf="isLoadingResults | async" class="grid place-items-center">
  <mat-spinner></mat-spinner>
</div>

<!-- Search results table -->
<app-track-data-table
  *ngIf="(isLoadingResults | async) === false"
  [trackTableData]="trackTableData"
></app-track-data-table>
